<template>
  <el-card class="content-card">
    <div class="el-descriptions__header">
      <div class="el-descriptions__title">营业执照</div>
    </div>

    <el-form ref="formRef" :disabled="readonly" :model="licenseData" :rules="formRules" label-width="120px">
      <el-form-item label="营业执照图：" prop="image">

        <UploadImage v-model="licenseData.image" :disabled="readonly" :show-delete="true" :show-tip="false" @change="handleUploadBusinessLicense"/>
      </el-form-item>
      <el-form-item label="执照名称：" prop="name">
        <el-input v-model="licenseData.name" placeholder="营业执照名称"/>
      </el-form-item>
      <el-form-item label="执照号：" prop="number">
        <el-input v-model="licenseData.number" placeholder="社会信用代码"/>
      </el-form-item>
      <el-form-item label="经营范围：" prop="scope">
        <el-input v-model="licenseData.scope" :autosize="{ minRows: 1, maxRows: 3}" placeholder="经营范围" readonly type="textarea"/>
      </el-form-item>
      <el-form-item label="详细地址：" prop="address">
        <el-input v-model="licenseData.address" autosize placeholder="详细地址" readonly type="textarea"/>
      </el-form-item>
      <el-form-item label="注册资本：" prop="capital">
        <el-input v-model="licenseData.capital" placeholder="注册资本"/>
      </el-form-item>

<!--      <el-form-item label="执照有效期：" prop="duration_type">-->
<!--        <el-input v-model="licenseData.duration_type" placeholder="执照有效期" readonly/>-->
<!--      </el-form-item>-->
      <el-form-item label="执照注册时间：" prop="start_date">
        <el-input v-model="licenseData.start_date" placeholder="执照注册时间" readonly/>
      </el-form-item>
      <el-form-item label="有效截止时间：" prop="end_date">
        <el-input v-model="licenseData.end_date" placeholder="有效截止时间" readonly/>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { ElLoading, FormInstance, FormRules } from 'element-plus';
import { UploadImage } from '@/components/upload';
import { ocrRecognize } from '@/api/api-common.ts';
import { BusinessLicenseData } from '@/api/common.ts';

const licenseData = defineModel<BusinessLicenseData>({required: true});
const props = defineProps({
  readonly: {
    type: Boolean,
    default: false
  },
});

const autoRecognize = ref(true);
const defBusinessLicense: BusinessLicenseData = <BusinessLicenseData>{};
const formRef = ref<FormInstance>();
const formRules = reactive<FormRules>({
  image: [{required: true, message: '请上传营业执照图', trigger: 'blur'}],
});

/** 表单重置 */
const formReset = () => {
  if (!formRef.value) return
  formRef.value.resetFields()
};

/** 表单验证 */
const formValidate = () => {
  if (!formRef.value) return
  return formRef.value.validate()
};

/** 对外提供方法 */
defineExpose({
  formReset,
  formValidate,
});

/** 处理营业执照上传完成 */
const handleUploadBusinessLicense = async (val) => {
  if (val) {
    // 调用接口进行识别
    const loading = ElLoading.service({
      lock: true,
      text: '正在识别中...',
      background: 'rgba(0, 0, 0, 0.2)'
    })
    try {
      let params = {type: 'license', url: val};
      const {body} = await ocrRecognize(params,{action:'ocr'});
      // let type = data.type;
      let typeData =body;
      if (typeData) {
        licenseData.value.name = typeData.name;
        licenseData.value.number = typeData.reg_num;
        licenseData.value.scope = typeData.business;
        licenseData.value.address = typeData.address;
        licenseData.value.capital = typeData.capital;
        licenseData.value.start_date = typeData.establish_date;
        licenseData.value.end_date = typeData.valid_period;
      }
    } finally {
      loading.close();
    }
  } else {
    licenseData.value = {...defBusinessLicense};
  }
};
</script>

<style lang="scss" scoped>

</style>
